<template>
  <div class="app-container">
    <div class="container">
      <!--      标题-->
      <el-row>
        <el-col :span="24" :xs="24">
          <div class="title">现场设备<i class="el-icon-caret-right"></i>{{ siteName }}通道列表</div>
        </el-col>
      </el-row>
      <!-- 搜索 -->
      <el-row style="margin-left: 20px;">
        <el-col :span="24" :xs="24">
          <Search
              :search-data="searchData"
              :search-params="queryParams"
              @change="searchParamsUpdate"
              @selectChange="selectChange"
          >
          </Search>
        </el-col>
      </el-row>
      <!--    增加-->
      <el-row :gutter="10" style="margin-bottom: 15px;margin-left: 17px;">
        <el-col :span="1.5">
          <el-button
              style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
              icon="el-icon-back"
              size="mini"
              @click="handleBack"
          >返回</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
              style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
          >新增</el-button>
        </el-col>
        <el-col :span="1">
          <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
        </el-col>
      </el-row>
      <!--      表格-->
      <el-table
          :data="tableData"
          height="64vh"
          style="width: 100%;background: #002127;"
          :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
          :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
        <el-table-column prop="deviceId" label="传输设备ID" align="center" v-if="columns[0].visible"></el-table-column>
        <el-table-column prop="deviceName" label="传输设备" align="center" v-if="columns[1].visible"></el-table-column>
        <el-table-column prop="channelId" label="数据通道ID" align="center" v-if="columns[2].visible"></el-table-column>
        <el-table-column prop="channel" label="通道" align="center" v-if="columns[3].visible"></el-table-column>
        <el-table-column prop="channelAlias" label="通道别名" align="center" v-if="columns[4].visible"></el-table-column>
        <el-table-column prop="value" label="通道值" align="center" v-if="columns[5].visible" sortable></el-table-column>
        <el-table-column prop="unit" label="通道单位" align="center" v-if="columns[6].visible"></el-table-column>
        <el-table-column prop="time" label="时间" align="center" v-if="columns[7].visible" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button
                style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                size="mini"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-row>
        <el-col :span="24" :xs="24">
          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.limit"
          />
        </el-col>
      </el-row>
      <!--      新增-->
      <div class="add">
        <el-dialog :title="title" :visible.sync="open" width="600px" :show-close="false">
          <el-form ref="form" label-width="90px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="设备" prop="siteId">
                  <el-select
                      v-model="queryParams.deviceId"
                      placeholder="请选择"
                      size="small"
                      filterable
                      style="width: 100%"
                      @change="selectChange"
                  >
<!--                    disabled-->
                    <el-option
                        v-for="item in dtuOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="请选择通道" prop="dataRuleId">
                  <el-checkbox-group v-model="checked" @change="test">
                    <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">{{item.label}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" style="background: #00B8B8;color: white;border: none;">确 定</el-button>
            <el-button @click="dialogCancel" style="background: #006675;color: white;border: none;">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getIndustryRuleByPage, saveIndustryRuleId, saveIndustryRuleIds, deleteIndustryRuleById,
  getDtuAllList, getRuleAllList } from '@/api/automation'
import Search from '@/components/PageSearch'
import Pagination from "@/components/Pagination";
import RightToolbar from '@/components/RightToolbar'
export default {
  name: "channelscene",
  components: { Search, Pagination, RightToolbar },
  data() {
    return {
      // 搜索
      searchData: [
        {
          type: 'select',
          label: '传输设备',
          prop: 'deviceId',
          options: [],
          placeholder: '请选择传输设备筛选'
        },
        {
          type: 'select',
          label: '通道',
          prop: 'dataRuleId',
          options: [],
          placeholder: '请选择数据通道筛选'
        }
      ],
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        dataRuleId: '',
        deviceId: '',
        deviceIndustryId: ''
      },
      // 表格
      tableData: [],
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, label: `传输设备ID`, visible: true },
        { key: 1, label: `传输设备`, visible: true },
        { key: 2, label: `数据通道ID`, visible: false },
        { key: 3, label: `通道`, visible: true },
        { key: 4, label: `通道别名`, visible: true },
        { key: 5, label: `通道值`, visible: true },
        { key: 6, label: `通道单位`, visible: true },
        { key: 7, label: `时间`, visible: true}
      ],
      // 弹出层标题
      title: "新增现场设备通道",
      // 是否显示弹出层
      open: false,
      dtuOption: [],
      channelOption: [],
      // 新增选框
      checked: [],
      checkList: [],
      // 路由跳转传递的参数
      siteId: '',
      deviceIndustryId: '',
      siteName: '',
      deviceId: ''
    }
  },
  props: {},
  watch: {
    dtuOption: {
      handler(val) {
        this.searchData[0].options = this.dtuOption
      },
      immediate: true
    },
    channelOption: {
      handler(val) {
        this.searchData[1].options = this.channelOption
      },
      immediate: true
    }
  },
  created() {
    this.siteId = this.$route.query.Data
    console.log(this.siteId)
    this.deviceIndustryId = this.$route.query.Datas
    console.log(this.deviceIndustryId)
    this.siteName = this.$route.query.siteName
    this.getDtuOption()
    this.getList()
  },
  mounted() {
  },
  methods: {
    //设备下拉
    getDtuOption() {
      getDtuAllList().then(res => {
        const data = res.data
        this.dtuOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    // 通道下拉
    getRuleOption() {
      getRuleAllList(this.queryParams.deviceId).then(res => {
        const data = res.data
        this.channelOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    //设备下拉触发
    selectChange(val, item) {
      console.log('selectChange', val, item)
      this.deviceId = val
      console.log( this.deviceId,'222')
      this.getChannelOption()
      if(item == 'deviceId') {
        this.queryParams.dataRuleId = ''
        this.getRuleOption() //通道下拉
      }
    },
    //获取未配置通道
    getChannelOption(){
      saveIndustryRuleId(this.queryParams.deviceId).then(res => {
        const data = res.data
        this.checkList = data.map(item => {
          return {
            id: item.id,
            label: item.name
          }
        })
        console.log(this.checkList)
      }).catch(err => {
        console.log(err)
      })
    },
    // 分页查询
    getList() {
      this.queryParams.deviceIndustryId = this.deviceIndustryId
      getIndustryRuleByPage(this.queryParams).then((res) => {
        console.log(res)
        this.total = res.dataCounts
        this.tableData = res.data || []
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 选中的通道
    test(val){
      console.log(val)
      this.checked = val
      console.log(this.checked)
    },
    //返回
    handleBack(){
      this.$router.go(-1)
    },
    // 新增
    handleAdd() {
      this.open = true
    },
    dialogCancel() {
      this.open = false
      this.getChannelOption()
      this.checked=[]
    },
    submitForm() {
      if(this.checked !='') {
        const data= {
          siteId: this.siteId,
          deviceIndustryId: this.deviceIndustryId,
          deviceId: this.deviceId,
          dataRuleId:this.checked
        }
        saveIndustryRuleIds(data).then((res) => {
          this.$message.success('添加成功！')
          this.dialogCancel()
          this.getList()
        }).catch((err) => {
          this.$message.error(err.errorMsg)
        })
      } else {
        this.$message.warning('请选择至少一个通道')
        return false
      }
    },
    // 删除
    handleDelete(index,row) {
      console.log(index,row)
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          console.log(action)
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            deleteIndustryRuleById(row.id).then(res => {
              done()
              instance.confirmButtonLoading = false
            }).catch(err => {
              this.$message.error(err.errorMsg)
            })
          } else {
            done()
            instance.confirmButtonLoading = false
          }
        }
      }).then(() => {
        this.$message.success('删除成功!')
        this.getList()
        this.getChannelOption()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 新的搜索内容
    searchParamsUpdate() {
      this.getList()
    }
  }
}
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0C323A;
  .container {
    width: 100%;
    height: 100%;
    background: #002127;
    border-radius: 10px;
    .title {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #999999;
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 15px;
      padding-left: 20px;
      margin-top: 10px;
    }
    // 显隐列
    .el-col-1 {
      float: right;
    }
  }
}
.add {
  ::v-deep(.el-dialog){
    background: rgba(4,28,33,0.8);
    box-shadow: 0px 0px 20px 0px rgba(0,231,231,0.5);
    border-radius: 20px;
    border: 1px solid rgba(0,231,231,0.698);
    //标题颜色
    .el-dialog__title {
      color: white;
    }
    // 输入框label字体颜色
    .el-form-item__label {
      color: white;
    }
    // 输入框
    .el-input__inner {
      background: #041C21;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid rgba(0,231,231,0.502);
      color: white;
    }
    // 错误规则提示
    .el-form-item__label:before {
      color: #00E7E7;
    }
    // 必填星号
    .el-form-item__error {
      color: #00E7E7;
    }
  }
}
// 表格设置鼠标经过时背景颜色
::v-deep.el-table tbody tr:hover>td{
  background-color: #02565c !important;
}
//表格改变每行底边框颜色
::v-deep.el-table  td, .el-table th.is-leaf  {
  border-bottom:  1px solid rgba(0,231,231,0.302)!important;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #002127;
}
</style>
